<template>
  <div class="conetr" v-loading="loading">
    <div class="center-board">
      <div class="center-title">
        <h3>
          <span v-if="props.type == 'handle'">处理</span>
          <span v-else>详情信息</span>
        </h3>
      </div>
      <div class="action-bar mb-[20px]">
        <el-button icon="Back" type="primary" plain text @click="backTo">返回</el-button>
      </div>
    </div>
    <el-form ref="formRef" :model="orderFor" label-width="120px" :disabled="true">
      <el-form-item label="申请人员">
        <el-input
          v-model="orderFor.viewUserVo.nickname"
          placeholder="请输入"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item label="总积分">
        <el-input v-model="orderFor.currentCoins" placeholder="请输入" style="width: 400px" />
      </el-form-item>
      <el-form-item label="提取积分">
        <el-input v-model="orderFor.coins" placeholder="请输入" style="width: 400px" />
      </el-form-item>
      <el-form-item label="提取金额">
        <el-input v-model="orderFor.houseNumber" placeholder="请输入" style="width: 400px" />
      </el-form-item>
      <el-form-item label="发票凭证">
        <MultiImageUpload
          v-model="orderFor.files"
          disabled
          :showTip="false"
          :limit="orderFor.files?.length ?? 1"
        />
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="orderFor.applyTime"
          type="datetime"
          format="YYYY/MM/DD hh:mm:ss"
          value-format="YYYY-MM-DD hh:mm:ss"
          style="width: 400px"
        />
      </el-form-item>
      <el-form-item label="状态">
        <enum-select
          style="width: 400px"
          v-model="orderFor.status"
          placeholder="请选择状态"
          :enums="CASH_TYPE_ENUM"
        ></enum-select>
      </el-form-item>
      <el-form-item label="驳回理由" v-if="orderFor.status == 2">
        <el-input
          v-model="orderFor.auditDesc"
          style="width: 400px"
          :rows="2"
          type="textarea"
          placeholder="驳回理由"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { CASH_TYPE_ENUM } from "@/enums/conins/coinsCash";
import cashApi from "@/api/coins/cash-api";
// 1. 正确定义 props
const props = defineProps({
  // 1 是装修知识的type固定字段 2是装修案例
  type: {
    type: String,
    required: true,
    default: "add",
  },
  cashData: {
    type: Object,
    default: null,
  },
});
const orderFor = ref({
  id: 0,
  name: "",
  houseNeighborhood: "",
  settleApplyTime: "",
  coins: 0,
  operationStartTime: "",
  status: 1,
  auditDesc: "",
  files: [],
});
const loading = ref(false);

watch((newVal) => {
  console.log(props.cashData);

  orderFor.value = props.cashData;
  orderFor.value.houseNumber = orderFor.value.coins / 10;
});
// 4. 定义 emit 以便向父组件通知状态变化
const emit = defineEmits(["backTo"]);

function backTo() {
  emit("backTo");
}
</script>
<style scoped lang="scss">
.conetr {
  padding: 10px;
  background-color: #fff;
  position: relative;
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 20px;

  .center-board {
    .center-title {
      position: absolute;
      left: 20px;
    }
    .action-bar {
      position: relative;
      box-sizing: border-box;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      u .delete-btn {
        color: #f56c6c;
      }
    }
  }
}
</style>
